JSON হলো ডেটা বিনিময়ের জন্য একটি সাধারণ ফরম্যাট, যা মূলত JavaScript এর অবজেক্ট নোটেশন অনুসরণ করে। এটি একটি টেক্সট-ভিত্তিক ডেটা ফরম্যাট, যা মানুষের কাছে সহজবোধ্য এবং যেকোনো প্রোগ্রামিং ভাষার মাধ্যমে সহজেই প্রসেস করা যায়। JSON সাধারণত ওয়েব অ্যাপ্লিকেশনগুলোর মধ্যে ডেটা এক্সচেঞ্জ করতে ব্যবহৃত হয়, বিশেষ করে Ajax রিকোয়েস্টের মাধ্যমে সার্ভার এবং ক্লায়েন্টের মধ্যে ডেটা আদান-প্রদানের ক্ষেত্রে।
{
"name": "John Doe",
"age": 30,
"isStudent": false,
"hobbies": ["reading", "coding", "gaming"],
"address": {
"street": "123 Main St",
"city": "New York",
"zip": "10001"
}
}
বিস্তারিত ব্যাখ্যা:
"name": "John Doe"." ") মধ্যে থাকে।"age": 30."isStudent": false."hobbies": ["reading", "coding", "gaming"]."address" এর মধ্যে অন্য একটি অবজেক্ট রয়েছে।JSON বিভিন্ন ক্ষেত্রে ব্যবহার করা হয়, বিশেষ করে ওয়েব অ্যাপ্লিকেশনে। নিচে JSON এর কিছু সাধারণ ব্যবহার উল্লেখ করা হলো:
config.json, যেখানে অ্যাপ্লিকেশনের কনফিগারেশন সেটিংস সংরক্ষণ করা থাকে।JSON.parse() এবং JSON.stringify() মেথড ব্যবহার করে JSON ডেটা অবজেক্টে কনভার্ট করা যায় এবং অবজেক্ট JSON ফরম্যাটে কনভার্ট করা যায়।// JSON স্ট্রিং
var jsonString = '{"name": "Jane Doe", "age": 25}';
// JSON স্ট্রিং থেকে JavaScript অবজেক্টে কনভার্ট করা
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Output: Jane Doe
console.log(jsonObject.age); // Output: 25
// JavaScript অবজেক্ট থেকে JSON স্ট্রিং তৈরি করা
var newObject = { name: "John Doe", age: 30 };
var newJsonString = JSON.stringify(newObject);
console.log(newJsonString); // Output: {"name":"John Doe","age":30}
Ajax এর মাধ্যমে JSON ডেটা রিকোয়েস্ট করা হলো ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের একটি সাধারণ এবং গুরুত্বপূর্ণ প্রক্রিয়া। Ajax ব্যবহার করে আমরা একটি API কল করতে পারি এবং JSON ফরম্যাটে ডেটা রিসিভ করে তা প্রসেস করতে পারি। নিচে একটি উদাহরণ সহ JSON ডেটা রিকোয়েস্ট করার ধাপগুলো এবং এর ব্যাখ্যা দেওয়া হলো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Data Request Example</title>
</head>
<body>
<h1>Fetch JSON Data Using Ajax</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- JSON ডেটা এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।fetchData() ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে JSON ডেটা নিয়ে আসবে।data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে Ajax রিকোয়েস্টের মাধ্যমে প্রাপ্ত JSON ডেটা দেখানো হবে।function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সম্পূর্ণ এবং সফল কিনা তা চেক করা
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else if (xhr.readyState === 4) {
// যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data!";
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
বিস্তারিত ব্যাখ্যা:
১. XMLHttpRequest অবজেক্ট তৈরি করা:
fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।২. রিকোয়েস্ট ওপেন করা:
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।"https://jsonplaceholder.typicode.com/posts/1" URL এ একটি JSON ডেটা ফেচ করা হবে। এটি একটি ডেমো API যা JSON ফরম্যাটে ডেটা প্রদান করে।true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।৩. রেসপন্স হ্যান্ডলিং:
xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।JSON.parse(xhr.responseText) ব্যবহার করে JavaScript অবজেক্টে কনভার্ট করা হয়েছে।data-container ডিভে সেই ডেটা দেখানো হয়েছে।৪. রিকোয়েস্ট পাঠানো:
xhr.send(); মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।এই উদাহরণে, আমরা একটি JSONPlaceholder API ব্যবহার করেছি, যা একটি ডেমো API এবং নিচের মতো JSON ডেটা প্রদান করে:
{
"userId": 1,
"id": 1,
"title": "Sample Title",
"body": "This is a sample body text."
}
fetchData() ফাংশন কল হয়।XMLHttpRequest অবজেক্ট ব্যবহার করে একটি GET রিকোয়েস্ট পাঠানো হয়, এবং সার্ভার থেকে JSON ডেটা রিসিভ করা হয়।JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়।এই ধাপগুলো অনুসরণ করে আপনি Ajax এর মাধ্যমে JSON ডেটা রিকোয়েস্ট করতে এবং সেটি প্রসেস করে ওয়েব পেজে দেখাতে পারবেন, যা ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে।
JSON ডেটা প্রসেস করার জন্য এবং তা HTML ডকুমেন্টে দেখানোর জন্য JSON.parse() মেথড এবং JavaScript ব্যবহার করা হয়। JSON.parse() মেথড JSON ফরম্যাটের ডেটাকে JavaScript অবজেক্ট বা অ্যারের মধ্যে কনভার্ট করে, যাতে সেই ডেটা দিয়ে DOM ম্যানিপুলেশন বা অন্যান্য কাজ করা যায়। নিচে একটি উদাহরণসহ JSON ডেটা প্রসেস এবং ডিসপ্লে করার ধাপগুলো ব্যাখ্যা করা হলো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Parse and Display Example</title>
</head>
<body>
<h1>Display JSON Data Using Ajax</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- JSON ডেটা এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।fetchData() ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে JSON ডেটা ফেচ করবে এবং তা প্রসেস করবে।data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে JSON ডেটা ডিসপ্লে করা হবে।function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সফল এবং সম্পূর্ণ কিনা তা চেক করা
// JSON ডেটা প্রসেস করা
var data = JSON.parse(xhr.responseText);
// HTML এ ডেটা দেখানো
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else if (xhr.readyState === 4) {
// যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data!";
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
বিস্তারিত ব্যাখ্যা:
১. XMLHttpRequest অবজেক্ট তৈরি করা:
fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।২. রিকোয়েস্ট ওপেন করা:
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে। "https://jsonplaceholder.typicode.com/posts/1" URL থেকে JSON ডেটা ফেচ করা হবে।true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।৩. JSON ডেটা প্রসেস করা:
xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।JSON.parse(xhr.responseText) মেথড ব্যবহার করে JSON ডেটা JavaScript অবজেক্টে কনভার্ট করা হয়েছে। এটি করলে আমরা JSON ডেটার ভেতরের ভ্যালুগুলোতে সহজে অ্যাক্সেস করতে পারি।৪. HTML DOM আপডেট করা:
title এবং body প্রপার্টি ব্যবহার করে HTML ডিভ (data-container) আপডেট করা হয়েছে।৫. এরর ম্যানেজমেন্ট:
status !== 200), তাহলে একটি এরর মেসেজ দেখানো হয়েছে।এই উদাহরণে, আমরা JSONPlaceholder API ব্যবহার করেছি যা নিচের মতো JSON ডেটা প্রদান করে:
{
"userId": 1,
"id": 1,
"title": "Sample Title",
"body": "This is a sample body text."
}
XMLHttpRequest ব্যবহার করে একটি GET রিকোয়েস্ট পাঠানো হয়েছে।JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়েছে।এই ধাপগুলো অনুসরণ করে Ajax এর মাধ্যমে JSON ডেটা ফেচ এবং প্রসেস করা যায় এবং তা HTML ডকুমেন্টে ডায়নামিকভাবে দেখানো যায়, যা ওয়েব অ্যাপ্লিকেশনকে ইন্টারেক্টিভ ও ইউজার-ফ্রেন্ডলি করে।
JSON ডেটা Ajax এর মাধ্যমে ফেচ করে HTML এ প্রদর্শন করার জন্য XMLHttpRequest এবং JavaScript এর JSON.parse() মেথড ব্যবহার করা হয়। নিচে একটি পূর্ণাঙ্গ উদাহরণ দেওয়া হলো যেখানে একটি API থেকে JSON ডেটা ফেচ করা হয় এবং তা HTML ডকুমেন্টে ডায়নামিকভাবে দেখানো হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Data Display Example</title>
</head>
<body>
<h1>Display JSON Data Using Ajax</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- JSON ডেটা এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।fetchData() ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে JSON ডেটা নিয়ে আসবে এবং তা প্রসেস করবে।data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে JSON ডেটা ডিসপ্লে করা হবে।function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সফল এবং সম্পূর্ণ কিনা তা চেক করা
// JSON ডেটা প্রসেস করা
var user = JSON.parse(xhr.responseText);
// HTML এ ডেটা দেখানো
document.getElementById("data-container").innerHTML = `
<h2>User Information</h2>
<p><strong>Name:</strong> ${user.name}</p>
<p><strong>Email:</strong> ${user.email}</p>
<p><strong>Address:</strong> ${user.address.street}, ${user.address.city}</p>
<p><strong>Phone:</strong> ${user.phone}</p>
`;
} else if (xhr.readyState === 4) {
// যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data!";
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
১. XMLHttpRequest অবজেক্ট তৈরি করা:
fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।২. রিকোয়েস্ট ওপেন করা:
xhr.open("GET", "https://jsonplaceholder.typicode.com/users/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।https://jsonplaceholder.typicode.com/users/1 URL থেকে JSON ডেটা ফেচ করা হবে। এটি একটি ডেমো API যা ইউজারের তথ্য JSON ফরম্যাটে প্রদান করে।true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।৩. JSON ডেটা প্রসেস করা:
xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।JSON.parse(xhr.responseText) মেথড ব্যবহার করে JSON ডেটা JavaScript অবজেক্টে কনভার্ট করা হয়েছে। এটি করলে আমরা JSON ডেটার প্রপার্টিগুলোর ভ্যালুতে সহজেই অ্যাক্সেস করতে পারি।৪. HTML DOM আপডেট করা:
৫. এরর ম্যানেজমেন্ট:
status !== 200), তাহলে একটি এরর মেসেজ দেখানো হয়েছে।এই উদাহরণে আমরা JSONPlaceholder API ব্যবহার করেছি যা নিচের মতো JSON ডেটা প্রদান করে:
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874"
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
XMLHttpRequest ব্যবহার করে একটি GET রিকোয়েস্ট পাঠানো হয়েছে।JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়েছে।XMLHttpRequest অবজেক্ট ব্যবহার করে GET রিকোয়েস্ট পাঠিয়ে JSON ডেটা ফেচ করা হয়েছে।এই উদাহরণটি অনুসরণ করে Ajax এর মাধ্যমে JSON ডেটা ফেচ, প্রসেস, এবং HTML এ দেখানোর প্রক্রিয়া সহজে বোঝা যায়। এটি ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করতে সাহায্য করে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
